<script setup lang="ts">
const props = defineProps({
    type: {
        type: String,
        default: 'primary'
    },
    text: {
        type: String,
        default: ''
    },
})
</script>
<template>
    <view :class="`${type} flex icon-box text-sm`">
        <image :src="`@/static/images/${type}.png`" mode="scaleToFill" />
        <text>{{ text }}</text>
    </view>
</template>
<style lang="scss">
.primary {
    color: #01A1FE;
}

.danger {
    color: #E72D11;
}

.warnning {
    color: #DFC39E;
}
.black {
    color: #000000;
}



.icon-box {
    background-color: #ffffff;
    border-radius: 50%;
    width: 100rpx;
    height: 100rpx;
    position: relative;

    image {
        width: 100%;
        height: 100%;
    }

    text {
        // color: #01A1FE;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
    }
}
</style>